<template>
	<view>
		<view class="header">
			<view class="header_1">支付成功，请您前往指定门店消费</view>
			<view class="header_2">
				<view class="iconfont t-icon t-icon-shangpu1" />
				<view class="shopName">{{shopName}}</view>
				<view class="shopLocation">{{shopLocation}}</view>
				<image class="fly" src="../../../static/fly.png" />
			</view>
		</view>
		<view class="context">
			<view class="context-one">
				<view class="title">订单详情</view>
				<view class="context-one-context">
					<view class="context-one-context-f">
						<text class="inner-a">{{oDO}}</text>
						<text class="inner-b">￥{{oDOM}}</text>
					</view>
					<view class="context-one-context-s">
						<text class="inner-a">{{oDT}}</text>
						<text class="inner-b">￥{{oDOT}}</text>
					</view>
				</view>

				<view class="context-two-context">
					<view class="context-one-context-tf">
						<text class="inner-a">原价</text>
						<text class="innerT-ob">￥{{Price}}</text>
					</view>
					<view class="context-one-context-tc">
						<text class="inner-a">优惠</text>
						<text class="innerT-c">-￥{{Preferential}}</text>
					</view>
					<view class="context-one-context-tt">
						<text class="inner-a">优惠券</text>
						<text class="innerT-tb">-￥{{Coupons}}</text>
					</view>
				</view>
				
				<view class="payAmount">
					<text class="payAmount-T">支付金额</text>
					<text class="payAmount-M">￥{{Price-Preferential-Coupons}}</text>
				</view>
			</view>
			<view class="orderM">
				<view class="title">订单信息</view>
				<view class="inner-order">
					<view class="inner-order-con">
						<text class="ioc">订单号：</text>
						<text class="ioe">{{orderNumber}}</text>
					</view>
					<view class="inner-order-con">
						<text class="ioc">下单时间：</text>
						<text class="ioe">{{orderTime}}</text>
					</view>
					<view class="inner-order-con">
						<text class="ioc">预约时间：</text>
						<text class="ioe">{{bookingTime}}</text>
					</view>
					<view class="inner-order-con">
						<text class="ioc">车辆：</text>
						<text class="ioe">{{car}}</text>
					</view>
					<view class="inner-order-con">
						<text class="ioc">备注：</text>
						<text class="ioe">{{remark}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopName: '伟业汽车维修厂(人民路店)',
				shopLocation: '山阳区人民中路32号',
				// orderDetailOne 第一个服务
				oDO: '车辆精洗',
				oDT: '附加费用',
				// orderDetailOneMoney 第一个服务费用
				oDOM: '199',
				oDOT: '199',
				// 原价
				Price:'100',
				// 优惠
				Preferential:'10',
				// 优惠卷
				Coupons:'20',
				// 订单号
				orderNumber:'121212112487878',
				// 下单时间
				orderTime:'2020.01.08. 17:40',
				// 预约时间
				bookingTime:'2020.01.08. 17:00 ',
				// 车辆
				car:'奔驰FWE4/豫A98FHJ ',
				// 备注
				remark:'',
				
			}
		},
		methods: {

		}
	}
</script>

<style>
	.header {
		left: 0px;
		top: 68px;
		width: 375px;
		height: 116px;
		line-height: 20px;
		background-color: rgba(0, 132, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		font-family: Roboto;
	}

	.header_1 {
		font-size: 18px;
		color: rgba(251, 251, 251, 1);
		padding: 18px 0 0 20px;
		font-weight: bolder;
	}

	.t-icon {
		display: inline-block;
		width: 24px;
		height: 24px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
	}

	.header_2 {
		display: flex;
		margin: 15px 0 0 25px;
		flex-wrap: wrap;
	}

	.shopName {
		color: white;
		margin-left: 20px;
		width: 207px;
		font-size: 14px;
		font-weight: bolder;
	}

	.shopLocation {
		color: white;
		font-size: 14px;
		font-weight: bolder;
		margin-left: 44px;
	}

	.fly {
		left: 125px;
		top: -24px;
		width: 24px;
		height: 24px;
	}

	.context {
		margin: 10px 10px 0 10px;
	}

	.context-one{
		margin: 0 0 0 4px;
	}

	.title {
		width: 72px;
		height: 25px;
		line-height: 25px;
		color: rgb(16, 16, 16);
		font-size: 18px;
		text-align: left;
		font-family: PingFangSC-regular;
		padding: 0 0 3px 6px;
		font-weight: bolder;
	}

	.context-one-context {
		left: 17px;
		top: 224px;
		width: 348px;
		height: 92px;
		line-height: 20px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.11);
		font-family: Roboto;
		margin:10px 0 ;
	}

	.context-one-context-f {
		line-height: 49px;
		margin-left: 20px;
		font-weight: bolder;
	}

	.context-one-context-s {
		line-height: 35px;
		margin-left: 20px;
		font-weight: bolder;
	}

	.inner-b {
		padding-left: 215px;
	}
	
	.context-two-context{
		left: 17px;
		top: 325px;
		width: 348px;
		height: 145px;
		line-height: 20px;
		border-radius: 10px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.11);
		font-family: Roboto;
	}
	
	.context-one-context-tf{
		padding-top: 5px;
		line-height: 45px;
		margin-left: 20px;
		font-weight: bolder;
	}
	
	.context-one-context-tc{
		line-height: 40px;
		padding-left: 20px;
		font-weight: bolder;
		border-bottom: 1px solid rgba(187,187,187,1);
	}
	
	.context-one-context-tt{
		padding-top: 5px;
		line-height: 45px;
		margin-left: 20px;
		font-weight: bolder;
	}
	
	.innerT-ob{
		padding-left: 243px;
	}
	
	.innerT-c{
		padding-left: 245px;
		color: rgba(255,37,37,1);
	}
	
	.innerT-tb{
		padding-left: 232px;
	}
	
	.payAmount{
		left: 15px;
		top: 482px;
		width: 348px;
		height: 66px;
		line-height: 20px;
		border-radius: 10px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.11);
		font-family: Roboto;
		margin-top: 12px;
		margin-bottom: 8px;
	}
	
	.payAmount-T{
		line-height: 66px;
		color: rgb(16,16,16);
		font-size: 14px;
		padding-left: 20px;
		font-weight: bolder
	}
	
	.payAmount-M{
		padding-left: 225px;
		font-weight: bolder;
	}
	
	.inner-order{
		left: 15px;
		top: 591px;
		width: 348px;
		height: 185px;
		line-height: 20px;
		border-radius: 10px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.11);
		font-family: Roboto;
		margin-top: 7px;
		font-weight: bolder;
	}
	
	.orderM{
		margin: 0 0 0px 4px;
		padding-bottom: 20px;
	}
	
	.inner-order-con{
		line-height: 35px;
		margin-top: 2px;
	}
	
	.ioc{
		padding-left: 20px;
		padding-top: 2px;
	}
	
	.ioe{
		float: right;
		padding-right: 16px;
	}
</style>